{% extends "admin/layout/main.html" %}

{% block title %} 后台登录 {% endblock %}

{% block body %}
<div class="main-wrapper login-body">
    <div class="login-wrapper">
        <div class="container">
            <div class="loginbox">
                <div class="login-left">
                    <img class="img-fluid" src="/public/assets/img/logo.png" alt="Logo">
                </div>
                <div class="login-right">
                    <div class="login-right-wrap">
                        <h1>登 录</h1>
                        <p class="account-subtitle">Access to our dashboard</p>
                        <!-- Form -->
                        <form>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="输入用户名..." v-model="form.username">
                            </div>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="输入密码..." v-model="form.password">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-block" type="submit" @click.stop.prevent="submit">登
                                    录</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    var Vueapp = new Vue({
        el: "#vueapp",
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        mounted() {
            var toast = "{{toast.msg}}"
            console.log(toast)
            if (toast && this.$refs.toast) {
                this.$refs.toast.show({
                    msg: "{{toast.msg}}",
                    type: "{{toast.type}}",
                })
            }
        },
        methods: {
            submit() {
                console.log(this.form)
                $.ajax({
                    type: 'post',
                    url: "/admin/loginevent?_csrf={{ctx.csrf|safe}}",
                    contentType: "application/json;chatset=UTF-8",
                    data: JSON.stringify(this.form),
                    success: function (result) {
                        Vueapp.$refs.toast.show({
                            msg: "登录成功",
                            type: "success",
                            success: function () {
                                window.location.href = "/admin"
                            },
                            delay: 1800
                        })
                    },
                    error: function (e) {
                        Vueapp.$refs.toast.show({
                            msg: e.responseJSON.data,
                            type: "danger",
                        })
                    }
                })
            }
        }
    })
</script>
{% endblock %}